body{
    position: relative;
}
//页头
#header{
    height:36px;
    background-color:black;
    .center{
        width:1200px;
        height:36px;
        ul{
            width:600px;
            height:36px;
            float:left;
            display: flex;
            align-items: center;
            li{
                height:12px;
                border-right:1px solid #ccc;
                float: left;
                cursor: pointer;
                a{
                    margin-left:8px;
                    margin-right:8px;
                    color: #ffffff99;
                    
                }
            }
        }
        .sign-in{
            width:507px;
            height:36px;
            float: left;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            div{
                height:14px;
                cursor: pointer;
                border-right:1px solid #ccc;
                a{
                    margin-left:8px;
                    margin-right:8px;
                    color: #ffffff99;
                }
            }
        }
       .cart{
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #424242;
        a{
            line-height: 36px;
            color: #ffffff99;
              img{
                margin-right: 5px;
              }
        }
        &:hover{
            color:red;
            cursor: pointer;
          }
       }
    }
   
}
.active{
    width:100%;
    height: 74px;
    position:fixed;
    top:0;
}
//顶部导航
#nav{
    background-color: #ffffff;
    z-index: 300;
    .center{
        height:74px;
        display: flex;
        align-items: center;
        .img{
            width:103px;
            height:74px;
            background:url('https://res.vmallres.com/portal/1.11.6.303/h5/images/logo_app.png');
            background-size: 103px;
        }
        .Navigation{
            width:1043px;
            line-height: 16px;
            div{
                width:808px;
                margin-left: 8px;
                display: flex;
                justify-content: flex-end;
                align-items: stretch;
                div{
                    font-size:16px;
                    color:rgb(0,0,0);
                    a{
                        &:hover{
                            color:red;
                          }
                    }
                }
            }
        }
        //需要给图片加点击事件
        .Shopping-cart{
            width:50px;
            height:26px;
            display: flex;
            justify-content: flex-end;
            background-color: #ffffff;
            img{
                width:26px;
                height:26px;
                &:hover{
                    cursor: pointer;
                }
            }
        }

    }
}
//遮罩层，需要在input上面写效果
.mask{
    width:592px;
    height:300px;
    background-color:#ffffff;
    position: absolute;
    top:36px;
    // opacity: .5;
    left:500px;
    z-index: 1999;
    margin:0 auto;
    overflow: hidden;
    display: none;
   
    div{
      width:640px;
      height:74px;
      margin: auto;
      overflow: hidden;
      margin-right: 40px;
      div{
        width: 592px;
        height:36px;
        margin-top: 19px;
        border:1px solid black;
        border-radius: 18px;
        display: flex;
        .sp1{
                display:block;
                width:36px;
                height: 36px;
                line-height: 36px;
                text-align: center;
                img{
                    width: 12px;
                    height:12px;
                }
        }
        input{
            width:514px;
            height:36px;
            border:none;
        }

        .sp2{
            display:block;
            width:36px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            &:hover{
                cursor: pointer;
            }
        }
      }
    }
    .mask-ul{
        width: 592px;
        min-height: 48px;
        margin: auto;
        opacity: .8;
        li{
            height:30px;
        }
    }
}

//轮播
#banner{
    width:100%;
    height:550px;
    background-color: bisque;
    position: relative;
    .swiper{
        height:550px;
        width:100%;
        img{
        height:550px;
        width:100%; 
        }
        .swiper-button-prev{
            margin-left: 360px;
            width:60px;
            height:46px;
            display: block;
            border:0px solid;
            background-color:#ccc;
            border-radius: 50%;
            text-align: center;
            color: #fff;
            opacity: .5;
        }
        .swiper-button-next{
            width:60px;
            height:46px;
            display: block;
            border:0px solid;
            background-color: #ccc;
            border-radius: 50%;
            text-align: center;
            color: #fff;
            opacity: .5;
        }
    }
    //渲染列表，做选项卡效果
    .list{
        width: 200px;
        height:496px;
        background-color: white;
        position: absolute;
        top:0px;
        left:110px;
        z-index:200 ;
        transform: translate(25%,5%);
        ul{
            width:200px;
            height:480px;
            line-height: 40px;
            opacity: .8;
            background-color: white;
            li{
                width:200px;
                height:40px;
                color: #333;
                font-size: 16px;
                font-weight: 400;
                cursor: pointer;
                &:hover{
                    color: black;
                    background-color: #ccc;
                }
                span{
                    &:nth-child(1)
                    {
                    float: left; 
                    margin-left: 20px;
                    font-size: 14px;
                    }
                    &:nth-child(2){
                        float: right;
                        margin-right: 20px;
                    }
                }
            }
        }
     } 
    }
    .options{
        width: 470px;
        height: 496px;
        background-color: white;
        z-index: 555;
        position: absolute;
        top:25px;
        left:360px;
        display: flex;
        display: none;
        li{
            width:230px;
            height: 496px;
            list-style: none;
            // overflow: hidden;
            float: left;

            img{
                width: 70px;
                height: 440px;
                margin-top: 20px;
            }
            .describe{
                position: relative;
                top: -460px;
                left: 50px;
                width: 160px;
                height: 471px;
                display: flex;
                flex-direction: column;
                align-items: space-evenly;
                justify-content: center;
                padding-left: 10px;
                padding-top: 25px;
               p{
               display: block;
               width: 120px;
               height: 90px;
               font-size: 16px;
               margin-left: 2px;
               cursor: pointer;
               &:hover{
                color: red;
               }
            } 
        }
    }
}

//导航
#Navigation{
    width: 100%;
    margin-top: 24px;
    background-color:#f1f3f5;
      .center{
        height:95px;
        overflow: hidden;
        div{
            width:200px;
            height:100%;
            float: left;
            text-align: center;
            margin-top: 8px;
            img{
                width:48px;
                height:48px;
            }
            p{
                margin:10px;
                color:black;
                font-size: 16px;
            }
          &:hover{
            cursor: pointer;
          }
        }
      }

}
//产品
#Product{
    width:100%;
    margin-top: 24px;
    .center{
        height:194px;
        display: flex;
        justify-content: space-between;
        img{
            width:291px;
            height:194px;
            &:hover{
              box-shadow: 0 15px 30px rgb(0 0 0 / 20%);  
              cursor: pointer;
            }
        }
    }
}
//渲染秒杀页面
#seckill{
    width:100%;
    margin-top: 24px;
    .center{
        height:370px;
        background-color:#f1f3f5;
        .box-seckill{
            height:64px;
            background-color: #f1f3f5;
            .box1{
                font-size: 24px;
                float: left;
                line-height: 64px;
                color: #000000;
            }
            .box2{
                float: right;
                font-size: 14px;
                line-height: 64px;
                color: #000000;
                opacity: .5;
                span{
                    display: inline-block;
                    width:17px;
                    height:19px;
                    text-align: center;
                }
            }
        }
        .box2-seckill{
            height:306px;
            display: flex;
            .countDown{
                width:230px;
                height:100%;
                background-color: #efe6ea;
                text-align: center;
               .top{
                width:230px;
                margin-top:55px ;
                img{
                    width:48px;
                    height:48px;
                }
               }
                span{
                    display: inline-block;
                    width:72px;
                    height:26px;
                    color: red;
                    font-size: 20px;
                    margin-bottom: 35px;
                }
                p{
                    width: 230px;
                    height: 21px;
                    line-height: 21px;
                    font-size: 16px;
                    margin-bottom: 17px;
                    text-align: center;
                }
                .bottom{
                    width:130px;
                    height: 40px;
                    margin-left: 55px;
                    background-color: #000000;
                    color: #fff;
                    line-height: 40px;
                    font-size: 16px;
                   
                }

            }
            .data{
                width: 970px;
                height:100%;
                display: flex;
                justify-content: space-evenly;
                
                li{
                    float: left;
                    width:234px;
                    height:100%;
                    margin-bottom: 14px;
                    background-color:#fff;
                    text-align: center;
                   }
                    img{
                    width:180px;
                    height:180px;
                    margin-top:30px;
                   }
                   .des{
                    line-height: 30px;
                    font-size: 14px;
                    color: #b0b0b0;
                    margin-top: 10px;
                    display: -webkit-box;
                    display: -moz-box;
                    white-space: pre-wrap;
                    word-wrap: break-word;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp:1;   /*显示行数*/      
                   }
                   .price{
                    color:red;
                    margin-top: 10px;
                    font-weight: bold;
                    font-size: 18px;
                   }
                   a{
                    &:hover{
                        color: black;
                    }
                   }
            }
        }
    }
}

//手机专区渲染
#phone{
    width:100%;
    height:850px;
    margin-top: 20px;
    .center{
        height: 850px;
        .huaweiPhone{
            height:64px;
            .left{
                width:88px;
                height:32px;
                float: left;
                font-size: 24px;
                font-weight: 400;
                color: #000000;
                line-height: 64px;
            }
            .middle{
                width:90px;
                height:24px;
                font-size: 18px;
                font-weight: 400;
                opacity: .5;
                line-height: 64px;
                float: left;
            }
            .right{
                width:60px;
                height:56px;
                float: right;
                font-size: 14px;
                text-align: right;
                font-weight: 400;
                line-height: 64px;
                color: #000000;
                opacity: .5;
                a{
                    &:hover{
                        color:red;
                    }
                }
                span{
                    margin-left: 5px;
                }
            }
        }
        .Render{
            height: 786px;
            .phoneList{
                height:786px;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                li{
                    background-color: #fff;
                    width: 291px;
                    height: 377px;
                    display: flex;
                    margin: 10px 0px;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    text-align: center;
                    img{
                        width:180px;
                        height:192px;
                    }
                    .title{
                        font-size: 14px;
                        color: #000000;
                    }
                    .des{
                        width:178px;
                        height: 34px;
                        line-height: 34px;
                        font-size: 14px;
                        color: #b0b0b0;
                        margin-top: 10px;
                        display: -webkit-box;
                        display: -moz-box;
                        white-space: pre-wrap;
                        word-wrap: break-word;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp:1;   /*显示行数*/      
                       }
                       .price{
                        color:red;
                        margin-top: 10px;
                        font-weight: bold;
                        font-size: 18px;
                       }
                       .promotion{
                        width:178px;
                        height: 34px;
                        margin-top: 10px;
                        display: -webkit-box;
                        display: -moz-box;
                        white-space: pre-wrap;
                        word-wrap: break-word;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp:2;   /*显示行数*/      
                       }
                       a{
                        &:hover{
                            color: black;
                        }
                       }
                }
            }
        }
    }
}
//尾部
#footer{
    height: 584px;
    margin-top: 48px;
    background-color: #fff;
    .center{
        height: 584px;
        .afterSales{
            height:120px;
            display: flex;
            justify-content: center;
            align-items: center;
            .box1{
                width:300px;
                height:72px;
                display: flex;
                justify-content: center;
                align-items: center;
                .enterprise{
                    width:209px;
                    height:24px;
                    display: flex;
                    .left{
                        width:24px;
                        height:24px;
                        background: url('../img/footer1.webp');
                        background-size: 24px;
                        margin-right: 10px;
                    }
                    .right{
                        width:169px;
                        height:24px;
                        font-size: 16px;
                    }
                }
                
            }
            .box2{
                width:300px;
                height:72px;
                display: flex;
                justify-content: center;
                align-items: center;
                .enterprise{
                    width:209px;
                    height:24px;
                    display: flex;
                    .left{
                        width:24px;
                        height:24px;
                        background: url('../img/footer2.webp');
                        background-size: 24px;
                        margin-right: 10px;
                    }
                    .right{
                        width:169px;
                        height:24px;
                        font-size: 16px;
                    }
                }
                
            }
            .box3{
                width:300px;
                height:72px;
                display: flex;
                justify-content: center;
                align-items: center;
                .enterprise{
                    width:209px;
                    height:24px;
                    display: flex;
                    .left{
                        width:24px;
                        height:24px;
                        background: url('../img/footer3.webp');
                        background-size: 24px;
                        margin-right: 10px;
                    }
                    .right{
                        width:169px;
                        height:24px;
                        font-size: 16px;
                    }
                }
                
             
            }
            .box4{
                width:300px;
                height:72px;
                display: flex;
                justify-content: center;
                align-items: center;
                .enterprise{
                    width:209px;
                    height:24px;
                    display: flex;
                    .left{
                        width:24px;
                        height:24px;
                        background: url('../img/footer4.webp');
                        background-size: 24px;
                        margin-right: 10px;
                    }
                    .right{
                        width:172px;
                        height:24px;
                        font-size: 16px;
                    }
                }
                
             
            }
        }
        .contact{
            height:213px;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            padding-top:56px;
            padding-bottom: 40px;
            display: flex;
            .left{
                width:921px;
                display: flex;
                div{
                    width: 159px;
                    height: 213px;
                    div{
                        font-size: 14px;
                        width: 153px;
                        height:28px;
                        margin-bottom: 32px;
                    }
                    dl{
                        li{
                        width: 153px;
                        height: 27px;
                        font-size: 12px;
                        color:#777777;
                        }
                    }
                }
            }
            .line{
                width:1px;
                height:160px;
                background-color: #ccc;
            }
            .right{
                width: 248px;
                height: 213px;
                .title{
                    width: 248px;
                    height:32px;
                    font-size: 24px;
                    text-align: center;
                }
                .customerService{
                    width: 248px;
                    height:17px;
                    font-size: 13px;
                    margin-top:2px;
                    text-align: center;
                }
                .onlineService{
                    width:248px;
                    height:34px;
                    display: flex;
                    justify-content: center;
                    margin-top: 16px;
                   .box{
                    width:170px;
                    height:34px;
                    line-height: 34px;
                    border:0px solid black;
                    background-color: #000000;
                    border-radius: 18px;
                    display: flex;
                    justify-content: center;
                    div{
                        width: 24px;
                        height:24px;
                        color: #fff;

                    }
                    a{
                        width: 48px;
                        height: 16px;
                        font-size: 12px;
                        margin-left: 7px;
                        color: #fff;
                    }
                   }
                }
                .vmall{
                    width:248px;
                    height:24px;
                    display: flex;
                    margin-top: 21px;
                    display: flex;
                    justify-content: center;
                    h2{
                        width:82px;
                        height:24px;
                        font-size: 12px;
                        margin-left:5px;
                        font-weight: 400;
                    }
                    div{
                        width:126px;
                        height:24px;
                       a{
                        width:24px;
                        height:24px;
                        margin-right: 10px;
                       }
                    }


                }
            }
        }
        .bottom{
            height:78.6px;
            background-color:#fff;
            padding: 33.5px 0px 40px;
            display: flex;
            div{
                width:107px;
                height:20px;
                img{
                    width:80px;
                    height:20px;
                }
            }
            .box{
                width: 793px;
                height: 78px;
                color: rgba(0,0,0,0.6);
                ul{
                    width: 793px;
                    height: 17px;
                    display: flex;
                    margin: -5px 0px 6px;
                    li{
                        font-size: 12px;
                       margin-right:6px;
                       a{
                        padding-right:6px ;
                       }
                    }
                }
             a{
                color: rgba(0,0,0,0.4);
                font-size: 12px;
                line-height: 17px;
             }
            }
            .img{
                width: 90px;
                height:32px;
                margin-left:210px ;
                background:url('../img/logo2.png');
            }
        }
    }
}
//侧边栏
#sidebar{
    width:80px;
    height: 272px;
    border:0px solid;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    position: fixed;
    right:16px;
    bottom: 32px;
    background-color: #fff;
    box-shadow: rgb(0 0 0 / 10%) 0px 2px 6px;
    z-index:100;
  
    div{
       width:80px;
       height:56px;
       a{
        &:hover{
            color:red;
        }
       }
       div{
        width:80px;
        height:40px;
        text-align: center;
        span{
            font-size:30px ;
           }
       }
       p{
        width: 80px;
        height: 16px;
        text-align: center;
       }
       .head{
        position: relative;
       }
      
       .span{
            width: 20px;
            height: 15px;
            border:0px solid;
            border-radius: 50px;
            background-color: red;
            color: #fff;
            position: absolute;
            top: 3px;
            right:12px;
        }
       
    }
}



